<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Inspection</title>
<style>
    .highlight {
        outline: 2px solid red !important;
    }
</style>
</head>
<body>

<div id="container">
    <h1 id="title">����һ������</h1>
    <p id="paragraph">����һ�����䡣</p>
    <ul id="list">
        <li id="item1">�б��� 1</li>
        <li id="item2">�б��� 2</li>
        <li id="item3">�б��� 3</li>
    </ul>
    <div class="box" id="box1">
        <p id="box1_text">����һ����������Ϊ box �� div Ԫ�ء�</p>
    </div>
    <div class="box" id="box2">
        <p id="box2_text">������һ����������Ϊ box �� div Ԫ�ء�</p>
    </div>
    <a href="#" id="link">����һ������</a>
    <button id="button">����һ����ť</button>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('*').forEach(function (el) {
            el.addEventListener('mouseover', function (e) {
                e.stopPropagation();
                e.preventDefault();
                el.classList.add('highlight');
                console.log('Element Tag:', el.tagName);
                console.log('Element ID:', el.id);
                console.log('Element Name:', el.getAttribute('name'));
                console.log('Element Text:', el.innerText);
                // ������Խ�Ԫ�ص���Ϣ���ݸ���� RPA ����
            });
            el.addEventListener('mouseout', function () {
                el.classList.remove('highlight');
            });
        });
    });
</script>

</body>
</html>
